<template>
  <div class='chart-wrap'>
    <div ref="chartsOverPark" class="chart-content" v-show="chatsBussData?.length || chatbBussData?.length"></div>
    <el-empty description="暂无数据" v-show="!chatsBussData?.length && !chatbBussData?.length"/>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getChartOverParkOption } from '../../echartOption'
  import { onMounted, reactive } from 'vue';
  const props = defineProps({
    sBussData:{
      type:Array,
      default:()=>[]
    },
    bBussData:{
      type:Array,
      default:()=>[]
    }
  })
  let chatsBussData = reactive([])
  let chatbBussData = reactive([])
  let echartsInstance = shallowRef(null);
  let chartsOverPark = shallowRef();
  const initChart = ()=>{
    const chatDataX = chatsBussData?.map(ele => ele.visitTime);
    const dataYsBuss = chatsBussData?.map(item => item.num) || [];
    const dataYbBuss = chatbBussData?.map(item => item.num) || [];
    echartsInstance.value = null;
    echartsInstance.value = echarts.init(chartsOverPark.value, null, {renderer:'svg'})
    const option = getChartOverParkOption(chatDataX,dataYsBuss,dataYbBuss)
    echartsInstance.value.setOption(option,true)
    window.addEventListener('resize', resize)
  }

  const resize = () =>{
    if(echartsInstance.value){
      echartsInstance.value?.resize()
    }
  }
  onUnmounted(() => {
    // 组件卸载时销毁图表实例
    if(echartsInstance.value){
      echartsInstance.value.dispose();
    }
  });

  watch(() => props.sBussData,(newValue)=>{
    chatsBussData = newValue;
    nextTick(() => {
      initChart()
      resize()
    })
  },
  {
    deep: true,
    immediate: true
  })
  watch(() => props.bBussData,(newValue)=>{
    chatbBussData = newValue;
    nextTick(() => {
      initChart()
      resize()
    })
  },
  {
    deep: true,
    immediate: true
  })
</script>
<style lang="scss" scoped>
  .chart-wrap{
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
</style>
